Shell কী এবং এর মাধ্যমে অ্যাপ্লিকেশন স্ট্রাকচার করা

.NET MAUI তে Shell হল একটি নতুন উপায় যা অ্যাপ্লিকেশনের নেভিগেশন এবং UI স্ট্রাকচারকে সহজ এবং পরিষ্কারভাবে সাজানোর জন্য ব্যবহৃত হয়। Shell অ্যাপ্লিকেশন তৈরি করার জন্য একটি সমন্বিত এবং ক্ষমতাশালী কাঠামো প্রদান করে, যা অ্যাপ্লিকেশনের বিভিন্ন অংশে navigation এবং UI elements এর জন্য সেন্ট্রাল কন্ট্রোল দেয়।

এটি .NET MAUI এবং Xamarin.Forms এ ব্যবহৃত হয় এবং অ্যাপ্লিকেশন নেভিগেশন এবং স্ট্রাকচারকেও সহজ এবং পরিষ্কার করে তোলে। Shell এর মাধ্যমে আপনি অ্যাপ্লিকেশনটির মূল কাঠামো এবং ব্যবহারের ধরণ সহজভাবে সংজ্ঞায়িত করতে পারেন।

Shell এর মূল বৈশিষ্ট্য:

1. Declarative Navigation:
   • Shell এর মাধ্যমে navigation কন্ট্রোলটি declaratively করা যায়। আপনি UI এর জন্য নেভিগেশন স্ট্রাকচার তৈরি করতে পারেন যেখানে প্রতিটি পেজের জন্য কাস্টম রুট এবং প্যারামিটার সেট করা যায়।
2. Flyout Menu (Sidebar):
   • Flyout Menu বা সাইডবার সহজভাবে অ্যাপ্লিকেশনের জন্য নেভিগেশন প্রদান করতে পারে, যেখানে আপনি অ্যাপ্লিকেশনের বিভিন্ন সেকশন বা পেজে নেভিগেট করতে পারবেন।
3. Tabbed Navigation:
   • Shell তে Tabbed Navigation সহজভাবে বাস্তবায়ন করা যায়, যেখানে আপনি একাধিক ট্যাব দ্বারা বিভিন্ন পেজে নেভিগেট করতে পারেন।
4. Search Handler:
   • Search Handler এর মাধ্যমে অ্যাপ্লিকেশনের মধ্যে সার্চ ফিচার যোগ করা যায়। এটি ইউজারদের অ্যাপ্লিকেশনের মধ্যে ডেটা বা কনটেন্ট খুঁজে পেতে সাহায্য করে।
5. Routing:
   • Shell-এ routing এবং URL-based navigation ব্যবহার করা যায়, যার মাধ্যমে অ্যাপ্লিকেশনটির বিভিন্ন স্ক্রিন বা পেজে রুট নির্ধারণ করা হয়।
6. Flyout Header and Footer:
   • Shell আপনাকে ফ্লাইআউট মেনুর হেডার এবং ফুটার কাস্টমাইজ করার সুযোগ দেয়।

.NET MAUI Shell এ অ্যাপ্লিকেশন স্ট্রাকচার তৈরি করা:

Shell ব্যবহার করে অ্যাপ্লিকেশন স্ট্রাকচার করার জন্য আপনাকে প্রথমে Shell পেজ তৈরি করতে হবে এবং তার মধ্যে FlyoutMenu বা TabbedPage যোগ করতে হবে।

Step 1: Basic Shell Setup

AppShell.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:YourApp"
       x:Class="YourApp.AppShell">

    <!-- Flyout Menu (Sidebar) Setup -->
    <FlyoutItem Title="Home">
        <TabBar>
            <Tab Title="Home">
                <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
            </Tab>
            <Tab Title="Settings">
                <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
            </Tab>
        </TabBar>
    </FlyoutItem>
</Shell>

এখানে, FlyoutItem ব্যবহার করা হয়েছে যাতে ফ্লাইআউট মেনুর মধ্যে Home এবং Settings নামে দুটি ট্যাব যুক্ত করা যায়। প্রতিটি ট্যাবের জন্য ShellContent অ্যাড করা হয়েছে, যা HomePage এবং SettingsPage কে নির্দেশ করে।

Step 2: Page Setup

এখন HomePage এবং SettingsPage তৈরি করা হবে। এই পেজগুলো .NET MAUI এর ContentPage হতে হবে, এবং এগুলির মধ্যে আপনি কাস্টম UI উপাদান যুক্ত করতে পারবেন।

HomePage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourApp.HomePage">
    <StackLayout>
        <Label Text="Welcome to the Home Page!"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

SettingsPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourApp.SettingsPage">
    <StackLayout>
        <Label Text="Settings Page"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Step 3: AppShell.xaml.cs

আপনার AppShell.xaml.cs ফাইলে Shell এর কনফিগারেশন থাকে এবং সেখানে নেভিগেশন বা অন্যান্য কার্যক্রম পরিচালিত হয়।

AppShell.xaml.cs:

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
    }
}

এখানে, AppShell ক্লাসের মধ্যে Shell কন্ট্রোলটি প্রাথমিকভাবে কনফিগার করা হয়েছে।

Shell এর কিছু অতিরিক্ত বৈশিষ্ট্য:

1. Flyout Menu Customization:
   • আপনি FlyoutMenu এর উপরে কাস্টম হেডার বা ফুটার যোগ করতে পারেন।

<FlyoutHeader>
    <Label Text="Welcome to My App!" />
</FlyoutHeader>
<FlyoutFooter>
    <Button Text="Log Out" />
</FlyoutFooter>

2. Navigation with Shell:
   • Shell দিয়ে আপনি PushAsync বা PopAsync ইত্যাদি মেথড ব্যবহার না করেই navigation পরিচালনা করতে পারেন। Shell আপনাকে পেজের জন্য routes বা URLs ব্যবহার করার সুযোগ দেয়।

await Shell.Current.GoToAsync("settings");

এখানে, "settings" একটি route যা SettingsPage এর দিকে নির্দেশ করে।

3. Search Handler:
   • আপনি Shell এর মধ্যে SearchHandler ব্যবহার করে অ্যাপ্লিকেশনের মধ্যে সার্চ ফিচার যোগ করতে পারেন।

<Shell.SearchHandler>
    <SearchHandler Placeholder="Search..." />
</Shell.SearchHandler>

4. TabbedPage:
   • TabbedPage ব্যবহার করে আপনি সহজেই অ্যাপের মধ্যে ট্যাববেসড নেভিগেশন তৈরি করতে পারেন।

<TabBar>
    <Tab Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </Tab>
    <Tab Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </Tab>
</TabBar>

Shell এর সুবিধা:

1. Declarative Navigation: Shell এর মাধ্যমে নেভিগেশন খুব সহজ এবং declarative পদ্ধতিতে পরিচালনা করা যায়।
2. Centralized Navigation: Shell অ্যাপ্লিকেশনের নেভিগেশন এক জায়গায় সংজ্ঞায়িত এবং কন্ট্রোল করা সহজ।
3. Built-in Navigation Patterns: Flyout, Tabbed, Stack, Modal navigation সহ একাধিক নেভিগেশন প্যাটার্নের সুবিধা।
4. Cleaner and Maintainable Code: Shell অ্যাপ্লিকেশনের কোডকে আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

Conclusion:

.NET MAUI Shell আপনার অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়াকে সহজ করে তোলে, যেখানে আপনি FlyoutMenu, TabbedNavigation, Search Handler এবং Routing এর মাধ্যমে কার্যকরী এবং স্মুথ নেভিগেশন তৈরি করতে পারেন। এটি অ্যাপ্লিকেশনের কাঠামোকে পরিষ্কার, সহজ এবং রক্ষণাবেক্ষণযোগ্য রাখে, এবং এটি cross-platform অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক হিসেবে কাজ করে।